<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #adv {
            position: fixed;
            right: 0;
            bottom: -470px;
        }
    </style>
</head>
<body>
<!--<div id="counter"></div>-->
<!--<button id="btn">获取验证码</button>-->
<div id="adv">
    <div>
        <button id="close-btn">关闭广告</button>
    </div>
    <img src="icon/d1160924ab18972bd4075d9fb99d6c899e510fb39c1c.png" alt="正太">
</div>

<script>
    /*
    *    创建一个计时器
    */
    // let timer = setInterval(()=>{
    //     console.log('hello world')
    // }, 1000)
    /*
    *    停止计时器
     */
    // clearInterval(timer)

    /*
        案例 1 ：倒计时
     */
    // let time = 10;
    // let counter = document.getElementById('counter');
    // let timer = setInterval(()=>{
    //     if (time>0){
    //         counter.innerText = "倒计时：" + time + "秒";
    //         time--;
    //     }else{
    //         clearInterval(timer);
    //         counter.innerHTML = '时间到';
    //     }
    //
    // }, 1000)

    /*
       案例 2：验证码按钮
     */
    // let timer = null;
    // let time = 10;
    // let btn = document.getElementById('btn');
    // btn.onclick = () => {
    //     // 禁用按钮，防止多次点击
    //     btn.disabled = true;
    //     timer = setInterval(clock, 1000);
    // }
    //
    // function clock() {
    //     if (time > 0) {
    //         time--;
    //         btn.innerHTML = time + "秒后重新获取";
    //         btn.style.cursor = 'not-allowed';
    //     } else {
    //         clearInterval(timer);
    //         btn.innerText = "重新获取验证码";
    //         btn.disabled = false;
    //         btn.style.cursor = 'auto';
    //         time = 10;
    //     }
    // }

    /*
        案例 3：小广告
     */

    function moveUp() {
        let bottom = parseFloat(getComputedStyle( adv,null).bottom)
        if (bottom<0){
            bottom += 5;
            adv.style.bottom = bottom + 'px'
        }else {
            clearInterval(timer)
            timer = null; // 释放内存
        }
    }

    function moveDown() {
        let bottom = parseFloat(getComputedStyle( adv,null).bottom)
        if (bottom>-470){
            bottom -= 5;
            adv.style.bottom = bottom + 'px'
        }else{
            clearInterval(timer)
            // 等待3秒后开始移动
            setTimeout(()=>{
                timer = setInterval(moveUp, 30);
            },3000)
        }
    }

    let timer = timer2 = null;
    let adv = document.getElementById('adv');
    let closeBtn = document.getElementById('close-btn');

    closeBtn.onclick = ()=>{
        if (!timer){
            timer = setInterval(moveDown, 30);
        }
    }

    window.onload = function (){
        timer2 = setTimeout(()=>{
            timer = setInterval(moveUp, 30);
        },3000)
    }

</script>
</body>
</html>